<template>
  <div class="main">
    <div class="group">
      <h3>绑定 HTML style:绑定对象</h3>
      <div class="content">
        <div :style="{ fontSize: `${fontSize}px`, color: fontColor }" @click="changeFontColor">
          沁园春·雪
        </div>
      </div>
    </div>

    <div class="group">
      <h3>绑定 HTML style: 直接绑定对象</h3>
      <div class="content">
        <div :style="styleObject">沁园春·雪</div>
      </div>
    </div>

    <div class="group">
      <h3>绑定 HTML style: 绑定数组</h3>
      <div class="content">
        <div :style="[styleObject, styleObject2]">沁园春·雪</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const fontColor = ref('#abcdef')
const fontSize = ref(16)

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})

const styleObject2 = reactive({
  backgroundColor: 'green'
})

const changeFontColor = () => {
  fontColor.value = '#000'

  setTimeout(() => {
    fontSize.value = 24
  }, 1000)
}
</script>

<style lang="scss" scoped>
@import '@/assets/groupDemo.scss';

.active {
  color: darkorange;
}
.text-danger {
  background-color: red;
}

.text-success {
  background-color: green;
}

.active-new {
  font-size: 22px;
}
</style>
